<template>
  <div>
    <form :class="paper.style__">
      <div class="form-group">
        <label class="col-sm-12 control-label">报警器安装</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_alarm_inuse" type="success" buttons="false">
            <radio value="未安装">未安装</radio>
            <radio value="安装">安装</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_alarm_inuse == '未安装'">
        <label class="col-sm-12 control-label">未安装照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_inuse_path', '未安装照片')"  :src="piece.f_inuse_path" alt="未安装照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_inuse_path', this.piece.f_inuse_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_inuse_path)"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">品牌：</label>
        <div class="col-sm-12">
          <v-select :value.sync="f_brand" :options='brands' placeholder='请选择品牌'
            close-on-select clear-button></v-select>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">生产日期：</label>
        <div class="col-sm-12">
          <datepicker placeholder="生产日期"
            :value.sync="f_make_date"
            :disabled-days-of-Week="[]"
            :format="'yyyy-MM-dd'"
            :show-reset-button="reset">
          </datepicker>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <label class="col-sm-12 control-label">检验日期：</label>
        <div class="col-sm-12">
          <datepicker placeholder="检验日期"
            :value.sync="f_calibrate_date"
            :disabled-days-of-Week="[]"
            :format="'yyyy-MM-dd'"
            :show-reset-button="reset">
          </datepicker>
        </div>
      </div>
      <div :class="paper.style__" class="form-group">
        <div class="col-sm-12">
            <input type="checkbox" v-model="piece.f_uncalibrated">未检验</input>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_uncalibrated">
        <label class="col-sm-12 control-label">未检验照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_uncalibrated_path', '未检验照片')"  :src="piece.f_uncalibrated_path" alt="未检验照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_uncalibrated_path', this.piece.f_uncalibrated_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_uncalibrated_path)"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">工作状态</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_working_state" type="success" buttons="false">
            <radio value="正常">正常</radio>
            <radio value="异常">异常</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_working_state == '异常'">
        <label class="col-sm-12 control-label">工作状态异常照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_working_state_path', '报警器工作状态异常照片')"  :src="piece.f_working_state_path" alt="报警器工作状态异常照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_working_state_path', this.piece.f_working_state_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_working_state_path)"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">探头工作状态</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_sensor_state" type="success" buttons="false">
            <radio value="正常">正常</radio>
            <radio value="异常">异常</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_sensor_state == '异常'">
        <label class="col-sm-12 control-label">探头工作状态异常照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_sensor_state_path', '报警器探头工作状态异常照片')"  :src="piece.f_sensor_state_path" alt="报警器探头工作状态异常照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_sensor_state_path', this.piece.f_sensor_state_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_sensor_state_path)"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">探头安装状态</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_sensor_setup" type="success" buttons="false">
            <radio value="合格">合格</radio>
            <radio value="不合格">不合格</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_sensor_setup == '不合格'">
        <label class="col-sm-12 control-label">探头安装不合格照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_sensor_setup_path', '报警器探头安装不合格照片')"  :src="piece.f_sensor_setup_path" alt="报警器探头安装不合格照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_sensor_setup_path', this.piece.f_sensor_setup_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_sensor_setup_path)"></span>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-12 control-label">防爆设施（穿线管、开关）</label>
        <div class="col-sm-12">
          <radio-group :value.sync="piece.f_explosive_proof" type="success" buttons="false">
            <radio value="有">有</radio>
            <radio value="无">无</radio>
          </radio-group>
        </div>
      </div>
      <div class="form-group" v-show="piece.f_explosive_proof == '无'">
        <label class="col-sm-12 control-label">无防爆设施（穿线管、开关）照片：</label>
        <div class="col-sm-12">
          <img :class="paper.style__" @click="takePic('f_proof_path', '无防爆设施（穿线管、开关）照片')"  :src="piece.f_proof_path" alt="无防爆设施（穿线管、开关）照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style__" class="glyphicon glyphicon-trash" @click="delfile('f_proof_path', this.piece.f_proof_path)"></span>
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="this.$parent.$parent.viewPic(this.piece.f_proof_path)"></span>
        </div>
      </div>
    </form>
    <a href="#" class="btn btn-success" @click="goBackValidation">确定</a>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'
import RadioGroup from 'vue-strap/src/radioGroup'
import Radio from 'vue-strap/src/radioBtn'

export default {
  title: '报警器',
  data() {
    return {
      paper: this.$parent.$parent.data,
      f_make_date: '',
      f_calibrate_date: '',
      f_brand: '',
      brands: Util.choices(this.$parent.$parent.role, '报警器品牌')
    }
  },
  props: ['idx'],
  components: {
    RadioGroup,
    Radio
  },
  ready() {
    this.$set('piece', this.paper.f_alarms[this.idx])

    if(!this.piece.f_inuse_path)
      this.$set('piece.f_inuse_path', Vue.nopic)
    this.$watch('piece.f_alarm_inuse', function(val) {
      if(val == '未安装') {
        this.$set('piece.f_brand', null)
        this.$set('piece.f_make_date', null)
        this.$set('piece.f_calibrate_date', null)
        this.$set('f_brand', '')
        this.$set('f_make_date', null)
        this.$set('f_calibrate_date', null)
        this.$set('piece.f_uncalibrated', null)
        this.$set('piece.f_working_state', null)
        this.$set('piece.f_sensor_state', null)
        this.$set('piece.f_sensor_setup', null)
        this.$set('piece.f_explosive_proof', null)
        this.$set('piece.f_inuse_path', Vue.nopic)
      }
    })

    if(!this.piece.f_uncalibrated_path)
      this.$set('piece.f_uncalibrated_path', Vue.nopic)
    this.$watch("piece.f_uncalibrated", function(val){
      if(!val)
        this.$set('piece.f_uncalibrated_path', Vue.nopic)
    })

    if(!this.piece.f_proof_path)
      this.$set('piece.f_proof_path', Vue.nopic)
    this.$watch('piece.f_explosive_proof', function (val) {
      if(val == '有') {
        this.$set('piece.f_proof_path', Vue.nopic)
      }
    })

    // 处理品牌
    if(!this.piece.f_brand) {
        this.$set('piece.f_brand', null)
    } else {
      this.f_brand = [this.piece.f_brand]
    }
    this.$watch('f_brand', function (val) {
        this.piece.f_brand = val[0]
    })

    if(!this.piece.f_working_state_path)
      this.$set('piece.f_working_state_path', Vue.nopic)
    this.$watch('piece.f_working_state', function (val) {
      if(val == '正常') {
        this.piece.f_working_state_path = Vue.nopic
      }
    })

    if(!this.piece.f_sensor_state_path)
      this.$set('piece.f_sensor_state_path', Vue.nopic)
    this.$watch('piece.f_sensor_state', function (val) {
      if(val == '正常') {
        this.piece.f_sensor_state_path = Vue.nopic
      }
    })

    if(!this.piece.f_sensor_setup_path)
      this.$set('piece.f_sensor_setup_path', Vue.nopic)
    this.$watch('piece.f_sensor_setup', function (val) {
      if(val == '合格') {
        this.piece.f_sensor_setup_path = Vue.nopic
      }
    })

    //检验日期
    if(!this.piece.f_calibrate_date) {
      this.$set('piece.f_calibrate_date', null)
    } else {
      this.f_calibrate_date = this.piece.f_calibrate_date
    }
    this.$watch('f_calibrate_date', function (val) {
      this.$set('piece.f_calibrate_date', val)
    })

    //生产日期
    if(!this.piece.f_make_date) {
      this.$set('piece.f_make_date', null)
    } else {
      this.f_make_date = this.piece.f_make_date
    }
    this.$watch('f_make_date', function (val) {
        this.$set('piece.f_make_date', val)
    })


  },
  methods: {
    cameraCallBack(prop, fileName) {
      console.log(prop + ',' + fileName)
      HostApp.__this__.piece[prop] = fileName + '?' + Math.random()
      console.log(HostApp.__this__.piece[prop])
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      console.log('this.piece[prop]:' + this.piece[prop])
      let fileName
      if(!this.piece[prop] || this.piece[prop].includes("nopic.png")) {
        fileName = Util.guid() +'-alarm-' + this.idx + '-' + prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.piece[prop])
      }
      HostApp._open_a_page({type: 'boomerang',
        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
        param: {file: fileName, requestCode: 111, callback:'javascript:HostApp.__callback__("' + prop +'", "%s");', watermark: title + '\t时间：'+ Util.toStandardTimeString() + '\t' + Vue.user.name}
      })
    },
    goBackValidation() {
      this.$goto('paper-device-noncivil', {}, 'paper-router')
    }
  }
}
</script>
